<template>
	<view class="columnbox wdh-100 content">
		<view class="wdh-100 rowbox jus tab-box">
			<view @click="changeTab(index)" class="columnbox one-tab" :class="{'sel-tab':curtab==index}"
				v-for="(item,index) in tabList" :key='index' style="white-space: nowrap;">{{item.name}}
				<view class="tab-line" v-if="curtab==index"></view>
			</view>
		</view>
		<scroll-view scroll-x class="type-scroll">
			<view @click="changeType(item)" class="type-scroll-box" v-for="(item,index) in typeList">
				<view class="rowbox type-scroll-info" :class="{'sel-type':curType==item.id}">{{item.title}}</view>
			</view>
		</scroll-view>
		<scroll-view id="ceshi" scroll-y="true" class="scroll-Y columnbox" :style="{height: scrollHeight}" @scrolltolower="scrolltolower">
		<view style="width: 100%;height: 100rpx;"></view>
		<view style="margin-top: 200rpx;" v-if="(list.length == 0 && curType == 0) || (mallOrderList.length == 0 && curType > 0)">
			<u-empty text="暂无订单"></u-empty>
		</view>
		<!-- <view style="margin-top: 200rpx;" v-if="mallOrderList.length == 0 && curType > 0">
			<u-empty text="暂无订单"></u-empty>
		</view> -->
		<!-- <view style="margin-top: 200rpx;" v-if="infoArr.length == 0 && this.curtab == 1">
			<u-empty text="暂无订单"></u-empty>
		</view> -->
		
		<view v-if="list.length > 0" class="columnbox one-box M-T24" v-for="(item,index) in list" :key='index' @click="showDetail(item)">
			<view class="rowbox wdh-100 spb">
				<view class="title rowbox wdh-100 spb">
					<view class="rowbox">{{item.stationName}} <u-icon color="#212121" size="28rpx" name="arrow-right"
							style="margin-left: 10rpx;"></u-icon> </view>
					<!-- 	<view class="or-price" v-if="item.overTime>0">
						<text style="font-size: 24rpx;">¥</text>
						{{item.overTimeFree}}
					</view> -->
				</view>
				<!-- <view class="s-name textovflow">{{item.name}}</view> -->
				<view class="rowbox s-qj">{{item.doorType}}</view>

			</view>
			<view class="rowbox wdh-100 jus" style="margin-top: 20rpx;">
				<image mode="aspectFill" class="o-img" :src="item.img">
				</image>
				<view class="columnbox o-info als">
					<view class="room-name rowbox wdh-100 spb">
						<view>{{item.doorName}}</view>
						<view class="payCash" v-if="item.payCash&&item.overPayCash=='0'">
							<text style="font-size: 24rpx;">¥</text> {{item.payCash}}
						</view>
					</view>
					<view class="o-desc">开始时间 {{item.beginTime}}</view>
					<view class="o-desc">结束时间 {{item.endTime||'-'}}</view>
					<view class="o-desc rowbox wdh-100 spb">
						<view>洗车时长 {{item.orderStatus==0?'洗车中':'已完成'}}</view>
						<view class="payOrderType">{{item.payOrderType}}</view>
					</view>
				</view>
			</view>
			<view class="rowbox wdh-100 o-price spb als" style="color: #000000;" v-if="item.overPayCash!='0'">
				<view style="font-weight: normal;">洗车费¥{{item.payCash}} 超时费￥{{item.overPayCash}}</view>
				<view class="rowbox">合计：
					<view class="payCash" v-if="item.payCash">
						<text style="font-size: 24rpx;color: #FF672D;">¥</text> {{item.totalPayCash}}
					</view>
				</view>
			</view>
			<view class="rowbox wdh-100 o-price spb als" style="justify-content: flex-end;" v-if="item.doorType != '人工'">
				<view v-if="item.orderStatus==0" class="rowbox o-btn" @click.stop="endOrder(item)">结束订单</view>
				<view class="wdh-100 rowbox" style="justify-content: flex-end;" v-else-if="item.orderStatus==1">
					<!-- <view @click="" style="margin-right: 20rpx;" class="rowbox o-btn fp-btn">开具发票</view> -->
					<view @click="" class="rowbox o-btn">再次洗车</view>
				</view>
			</view>
			<view class="rowbox wdh-100 o-price spb als" style="justify-content: flex-end;" v-else>
				<view v-if="item.orderStatus == 0" class="rowbox o-btn" @click.stop="chakandetails(item.orderId)">核销订单</view>
				<view v-if="item.orderStatus == 1" class="rowbox o-btn">已核销</view>
				<view v-if="item.orderStatus == 4" class="rowbox o-btn">已取消</view>
			</view>
		</view>
		<!-- 商城与积分订单 -->
		<view v-if="mallOrderList.length > 0" class="columnbox one-box M-T24" v-for="(item,index) in mallOrderList" :key='index' @click="showMallOrderDetail(item)">
			<view class="rowbox wdh-100 spb" v-if="item.stationName">
				<view class="title rowbox wdh-100 spb">
					<view class="rowbox">{{item.stationName}} <u-icon color="#212121" size="28rpx" name="arrow-right"
							style="margin-left: 10rpx;"></u-icon> </view>
				</view>
				<!-- <view class="rowbox s-qj">{{item.doorType}}</view> -->
			</view>
			<view class="rowbox wdh-100 jus" style="margin-top: 20rpx;">
				<image mode="aspectFill" class="o-img" :src="item.goodsUrl">
				</image>
				<view class="columnbox o-info als">
					<view class="room-name rowbox wdh-100 spb">
						<view>{{item.goodsName}}</view>
						<view class="payCash">
							<text style="font-size: 24rpx;">¥</text> {{item.realPrice}}
						</view>
					</view>
					<view class="o-desc">订单时间 {{item.createTime}}</view>
					<view class="o-desc rowbox wdh-100 spb">
						<view>订单状态 {{item.orderStatus}}</view>
						<view class="payOrderType">{{item.goodsPayType}}</view>
					</view>
				</view>
			</view>
			<view class="rowbox wdh-100 o-price spb als" style="justify-content: flex-end;"></view>
		</view>
		
		<!-- 核销列表 -->
		<view v-if="infoArr.length > 0" class="width-100 display  displayColumn wode_card all_item" v-for="(item,index) in infoArr" :key="index" @click.stop="chakandetails(item.id)">
			<compage @backHome.stop="backHome" :item="item"></compage>
		</view>
		</scroll-view>
	
	</view>
</template>

<script>
	import compage from './compage1.vue'
	export default {
		components: {
			compage
		},
		data() {
			return {
				typeList: [
					{
						title: '洗车订单',
						id: 0
					},
					{
						title: '商城订单',
						id: 1
					},
					{
						title: '积分订单',
						id: 2
					},
					{
						title: '挪车订单',
						id: 3
					},
				],
				curType: 0,
				tabList: [{
						name: '进行中'
					},
					{
						name: '待使用/核销',
						},
					 {
					 	name: '已完成'
					 },
					 {
					 	name: '已申述'
					 },
					 {
						 name:'退款/取消'
					 }
				],
				curtab: 0,
				pageNum: 1,
				infoArr:[],//列表
				total:0,
				list: [],
				mallOrderList: [],
				imsDex:0,
				moreflag: false,
				refreshflag: false,
				totals:5,
			};
		},
		onLoad() {
			this.getList()
			// this.endOrder({
			// 	id:'1837405102220304386'
			// })
		},
		onReachBottom() {
			console.log('下拉加载')
			if (this.moreflag) {
				this.pageNum++
				if(this.curType == 0){
					this.getList();
				}
				else{
					this.getMallOrderList();
				}
			}
		},
		onShow() {
			if (this.refreshflag) {
				this.refreshflag = false
				this.pageNum = 1
				this.list = []
				this.getList()
			}
		},
		methods: {
			// 查看详情
			chakandetails(id){
				this.$tab.navigateTo(`/packageB/orderDetails/orderDetails?id=${id}`)
			},
			showMap(v) {
				uni.openLocation({
					latitude: Number(v.lat),
					longitude: Number(v.lng),
					name: v.name
				})
			},
			changeType(v) {
				this.curType = v.id;
				this.pageNum = 1;
				this.list = [];
				this.mallOrderList = [];
				this.total = 0;
				this.getList();
			},
			changeTab(v) {
				console.log(v)
				if (this.curtab == v) {
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				this.curtab = v
				
				if (this.curtab == 1){
					setTimeout(() => {
						uni.hideLoading()
						this.pageNum = 1
						this.infoArr = []
						this.list = []
						this.mallOrderList = []
						this.getList();
					}, 500)
				}else if(this.curtab == 2){
					uni.hideLoading()
					this.pageNum = 1
					this.infoArr = []
					this.list = []
					this.mallOrderList = []
					this.getList();
				}else if(this.curtab == 4){
					uni.hideLoading()
					this.pageNum = 1
					this.infoArr = []
					this.mallOrderList = []
					this.list = [];
					this.getList();
				}else{
					// setTimeout(() => {
						uni.hideLoading()
						this.pageNum = 1
						this.infoArr = []
						this.list = []
						this.mallOrderList = []
						this.getList()
					// }, 500)
				}
			},
			// 触底加载
			scrolltolower(){
				console.log('触底加载!');
				if(this.list.length == this.total){
					return false;
				}
				this.pageNum++;
				this.getList();
			},
			endOrder(v) {
				console.log(v, '=====')
				if (this.submitflag) {
					return
				}
				this.submitflag = true
				uni.showModal({
					title: '是否确认结束订单',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							})
							this.$req.put(`/xcx/washOrder/finish/${v.orderId}`).then(res => {
								console.log(res,'587')
								if (res.data.code == 200) {
									uni.hideLoading()
									this.submitflag = false
									uni.showToast({
										title: '订单已结束',
										icon: 'success'
									})
									this.pageNum = 1
									this.list = []
									this.getList()
								} else if (res.data.code == 701) {
									this.$req.post('/pay/overTime', {
										orderId: v.orderId
									}).then(res => {
										console.log(res)
										uni.hideLoading()
										this.submitflag = false
										var info = res.data.data
										console.log(info,'sss')
										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: info.timeStamp + '',
											nonceStr: info.nonceStr,
											package: info.packages,
											signType: info.signType,
											paySign: info.paySign,
											success: res => {
												uni.showToast({
													title: '支付成功'
												})
												this.pageNum = 1
												this.list = []
												this.getList()
											},
											fail: function(err) {
												console.log('fail:' + JSON
													.stringify(err));
											},
											complete() {
												this.submitflag = false
												uni.hideLoading()
											}
										});
									})
								} else {
									uni.hideLoading()
									this.submitflag = false
									uni.showModal({
										title: '操作失败',
										content: res.data.msg
									})
								}
							})
						} else {
							this.submitflag = false
						}
					}
				})
			},
			getList() {
				if(this.curType == 0)			//洗车订单
					this.getWashList();
				if(this.curType == 1)			//商城订单
					this.getMallOrderList(1);
				if(this.curType == 2)			//积分订单
					this.getMallOrderList(0);
				// if(this.curType == 3)			//挪车订单
				// 	this.getWashList();
					
			},
			getMallOrderList(channel){
				let status = 2;
				if(this.curtab == 0){			//进行中
					status = 1;
				}else if(this.curtab == 1){		//待使用/核销
					status = 2;
				}else if(this.curtab == 2){		//已完成
					status = 0;
				}else if(this.curtab == 3){		//已申述
					status = 11;
				}else{							//退款/取消
					status = 12;
				}
				let data = {
					shelfChannel: channel,
					orderStatus: status,
					pageSize: 20,
					pageNum: this.pageNum
				}
				this.$req.get('/xcx/productUserOrder/list', data).then(res=>{
					if(res.data.code == 200){
						this.mallOrderList = this.mallOrderList.concat(res.data.rows);
						this.total = res.data.total;
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			getWashList(){
				let flag = 0
				let doorTypeArr = "0,1,2";
				if(this.curtab == 0){
					flag = 0;
					doorTypeArr = "0,1";
				}else if(this.curtab == 1){
					flag = 0
					doorTypeArr = "2";
				}else if(this.curtab == 2){
					flag = 1
				}else if(this.curtab == 3){
					flag = 3
				}else{
					flag = 2
				}
				
				this.$req.get('/xcx/washOrder/list', {
					orderStatus: flag,
					pageNum: this.pageNum,
					pageSize: 20,
					orderType: 0,//订单类型
					doorTypes: doorTypeArr,
				}).then(res => {
					console.log(res)
					// console.log(res.data.rows)
					if (res.data.code == 500) {
						uni.showLoading({
							title: '加载中',
							mask: true
						})
						setTimeout(() => {
							this.$req.get('/xcx/washOrder/list', {
								orderStatus: flag,
								pageNum: this.pageNum,
								pageSize: 20,
								orderType:0,//订单类型
								doorTypes: doorTypeArr,
							}).then(res => {
								uni.hideLoading()
								res.data.rows.forEach(resp => {
									resp.img = resp.listUrl
								})
								this.list = this.list.concat(res.data.rows);
								this.total = res.data.total;
								this.moreflag = res.data.rows.length == 20 ? true : false;
							})
						}, 2000)
					} else {
						res.data.rows.forEach(resp => {
							resp.img = resp.listUrl
						})
						this.list = this.list.concat(res.data.rows)
						this.moreflag = res.data.rows.length == 20 ? true : false
					}
				})
			},
			showMallOrderDetail(v) {
				this.$tab.navigateTo('/packageC/dingdanDetails/dingdanDetails?id=' + v.id)
			},
			showDetail(v) {
				if(v.doorType == "人工")
					this.$tab.navigateTo(`/packageB/orderDetails/orderDetails?id=${v.orderId}`)
				else
					uni.navigateTo({
						url: '/pages/order/detail?id=' + v.orderId
					})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.content {
		background: #F4F5FA;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
		width: 100%;
		overflow: hidden;
	}

	.type-scroll {
		white-space: nowrap;
		width: 100%;
		margin-top: 100rpx;
		// margin-bottom: 5rpx;
		margin-left: 20rpx;

		.type-scroll-box {
			display: inline-block;
			margin-left: 20rpx;
		}

		.type-scroll-info {
			height: 42rpx;
			border-radius: 8rpx;
			padding: 4rpx 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rpx;
			background: #FFFFFF;
			color: #72778A;
		}

		.sel-type {
			background: #126BC9;
			color: #FFFFFF;
		}
	}

	.tab-box {
		background: #F4F5FA;
		padding: 30rpx 30rpx 10rpx 30rpx;
		position: fixed;
		top: var(--window-top);
		z-index: 9;
		left: 0;

		.one-tab {
			font-family: PingFang SC, PingFang SC;
			font-size: 28rpx;
			color: #212121;
			margin-right: 70rpx;
			font-weight: 400;
		}

		.sel-tab {
			font-weight: 500;
			color: #000;
		}

		.tab-line {
			width: 36rpx;
			height: 6rpx;
			background: #126BC9;
			border-radius: 3rpx;
			position: absolute;
			bottom: 2rpx;
		}
	}

	.one-box {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding-bottom: 60rpx;
		margin-top: -60rpx;
		margin-left: 25rpx;
		margin-bottom: 20rpx;
		position: relative;

		.title {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #000000;
			padding-bottom: 20rpx;
			border-bottom: #F6F6F6 solid 1px;
		}

		.zz-box {
			background-color: rgba(119, 40, 245, 0.28);
			color: rgba(119, 40, 245, 1);
			font-size: 28rpx;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			line-height: 32rpx;
		}

		.o-img {
			width: 178rpx;
			height: 178rpx;
			border-radius: 12rpx;
		}

		.o-info {
			margin-left: 20rpx;
			width: calc(100% - 190rpx);
			height: 190rpx;
			justify-content: space-between;
		}

		.room-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #000000;
		}

		.o-desc {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #72778A;
		}

		.o-price {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rpx;
			color: #FF672D;
			margin-top: 20rpx;

			text {
				color: #000;
				font-size: 32rpx;
			}
		}

		.o-bottom-box {
			margin-top: 20rpx;

			.location-box {
				font-size: 24rpx;
				color: #6D6A6B;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}


		}
	}

	.o-btn {
		height: 62rpx;
		background: #126BC9;
		border-radius: 12rpx;
		padding: 0 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.fp-btn {
		background: #fff;
		background: rgba(18, 107, 201, 0.1);
		border-radius: 12rpx;
		border: 2rpx #17698F solid;
		color: #17698F;
	}


	.or-price {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 40rpx;
		color: #FF672D;
	}

	.s-qj {
		height: 34rpx;
		background: #126BC9;
		border-radius: 0px 0px 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 20rpx;
		color: #FFFFFF;
		position: absolute;
		padding: 0 10rpx;
		top: 0;
		right: 40rpx;
	}

	.payOrderType {
		font-family: PingFang SC, PingFang SC;
		font-size: 24rpx;
		color: #000000;
	}

	.payCash {
		color: #FF672D;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 40rpx;
	}
</style>